@import 'components';

body {
  background: url(../img/background.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  padding: 2vh 3vw;
  gap: 1.5vh;
}

#stat {
  flex-shrink: 0;
  flex-grow: 0;
  max-height: 6vh;
  display: flex;
  justify-content: space-between;
  .box-top {
    border: 0.8 * @normal-box-border-width solid @color-brown;
    &.money {
      min-width: 60%;
      text-align: right;
    }
  }
}

#cooksWapper {
  flex-grow: 5;
  flex-shrink: 1;
  max-height: 50vh;
  .cooks {
    .box();
    padding: 2vw;
    flex-wrap: wrap;
    max-height: 50vh;
    background-color: @color-yellow;
    display: flex;
    gap: 5%;
    .cook {
      margin-bottom: 1vh;
      height: 100%;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      width: 30%;
      .tags-bottom .box-text {
        padding: 0.1rem 0rem;
      }
    }
  }
}

#customersWapper {
  flex-shrink: 1;
  flex-grow: 1;
  height: 40vh;
  .customers {
    .box();
    height: 100%;
    background-color: @color-organe;
    padding: 2vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .customer {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      height: 30%;
      width: 50%;
      .tags-right .box-text {
        padding: 0.1rem 0rem;
      }
      .face-box {
        height: 10vh;
        width: 10vh;
      }
    }
  }
}

#customerWaiting {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  flex-direction: row-reverse;
  .face-box {
    width: 10vh;
    height: 10vh;
  }
  .customerWait:not(:first-child) {
    margin-right: -2vh;
  }
  margin-bottom: 2vh;
}

.hidePeople {
  img {
    filter: contrast(0) brightness(0) invert(1);
  }
  .process {
    visibility: hidden;
  }
  .face {
    background-color: @color-bgc-light-gray;
  }
}

.delPeople {
  .face {
    background-color: @color-bgc-light-gray;
  }
  .face-img,
  .process {
    visibility: hidden;
  }
  .tags {
    visibility: hidden;
  }
}

.delSit {
  display: none !important;
}
